<template>
  <div style="width: 100%; display: flex">
    <!-- <div class="close-btn" @click="openFunc" :class="isOpen ? 'ishide' : 'isshow'"></div> -->
    <div class="actual-left" :class="isInit ? (isOpen ? 'myopen' : 'myclose') : css">

      <div style="display: flex; flex-direction:column;">
        <div>
          <RightThree @onMoveMap="parentMoveMap"></RightThree>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import actual from '@/components/MyLeftPage/actual'
import yearActual from '@/components/MyLeftPage/yearActual'
import weightStat from '@/components/MyLeftPage/weightStat'
import pointDetect from '@/components/MyLeftPage/pointDetect'
import MapLeft from '@/components/MyLeftPage/MapLeft'
import RightThree from '@/components/MyRightPage/RightThree'


export default {
  name: "MyLeftPage",
  components: {
    MapLeft,
    actual,
    yearActual,
    weightStat,
    pointDetect,
    RightThree
  },
  created() {
  },
  data() {
    return {
      /*左侧动画，首次加载不触发*/
      isInit: false,
    }
  },
  props: {
    css: {
      type: String,
      default: 'hide'
    },
    isOpen: {
      type: Boolean,
      default: true
    },
    leftstyle: {
      type: String,
      default: 'actual'
    }
  },
  methods: {
    parentMoveMap(data) {
      this.$emit('onMoveMap', data);
    },
    openFunc() {
      /*左侧收缩事件*/
      this.isInit = true
      this.$emit('openFunc')
    },
  }
}
</script>

<style scoped lang="scss">
$sidebar-width: 480px;

/*左侧收起展开按钮动画*/
@keyframes myopen {
  from {
    width: 0px;
  }

  to {
    width: 480px;
  }
}

@keyframes myclose {
  from {
    width: 480px;
  }

  to {
    width: 0px;
  }
}

/*左侧背景下的隐藏按钮*/
@keyframes isshow {
  0% {
    opacity: 0;
  }

  99% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/*左侧显示隐藏*/
/*按钮*/
.close-btn {
  position: absolute;
  width: 16px;
  height: 130px;
  margin-top: -65px;
  left: 0px;
  top: 50%;
  background: url("~@/assets/image/close-btn.png") no-repeat center;
  background-size: cover;
  cursor: pointer;
}

.myopen {
  animation-name: myopen;
  animation-duration: 500ms;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

.myclose {
  animation-name: myclose;
  animation-duration: 500ms;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

/*左侧隐藏按钮显示隐藏*/
.isshow {
  animation-name: isshow;
  animation-duration: 500ms;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

.ishide {
  opacity: 0;
}

.actual-left {
  width: 100%;
  // height: 100%;
   height: 90%;
  top: 90px;
  box-sizing: border-box;
  position: absolute;
  left: 0px;
  overflow: hidden;
  box-shadow: inset 0 0 1.77083vw #276288bd;
  background-color: transparent;
  background-image: linear-gradient(to left, rgba(9, 21, 42, 0.6), rgba(9, 21, 42, 0.6), rgba(9, 21, 42, 0.6), rgba(9, 21, 42, 0.8), rgba(9, 21, 42, 1), rgba(9, 21, 42, 1), rgba(9, 21, 42, 1), rgba(9, 21, 42, 1));

  .box {
    background: #00000099 url("~@/assets/image/actual-left.png") no-repeat center;
    background-size: cover;
    box-sizing: border-box;
    // width: 598px;
    height: 100%;

  }


  .open-btn {
    position: absolute;
    width: 16px;
    height: 130px;
    margin-top: -65px;
    right: 0px;
    top: 50%;
    background: url("~@/assets/image/open-btn.png") no-repeat center;
    background-size: cover;
    cursor: pointer;
  }
}

.hide {
  display: none;
}

.show {
  display: block;
}
</style>
